<template>
  <div class="client" :style="{ left, top, right, bottom }">
    <el-popover
      placement="right"
      :width="isPhoto ? 350 : 500"
      v-model="visible"
    >
     <i class="" >{{PostionNumber}}号相机</i>
      <i class="el-icon-close" @click="handlerCloseShow"> </i>
      <div class="input">
        <el-input
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
          v-model="textarea"
        >
        </el-input>
        <el-alert
          title="相机通讯提示"
          type="info"
          description="参数顺序: 条码号,干扰码;(示例: 8093,3)"
          show-icon
          v-if="isPhoto"
        >
        </el-alert>
        <el-alert
          title="机械手通讯提示"
          type="info"
          description="参数顺序: 下标,内容;(示例: 
            0,0  (启动),
            3,1  (吸盘组合),
            1,1  (吸片),
            2,5  (厚度),
            5,1  (下架号),
            4,2  (抬片),
            6,1  (换架清空))"
          show-icon
          v-else
        >
        </el-alert>
        <div
          class="footer"
          :style="{
            display: 'flex',
            flexDirection: 'row-reverse',
            marginTop: '10px',
          }"
        >
          <el-button
            type="primary"
            style="marginleft: 5px"
            size="mini"
            @click="handlerConfirm"
            >确定</el-button
          >
          <el-button @click="deleteValue" style="marginleft: 5px" size="mini"
            >清空</el-button
          >
        </div>
      </div>
      <el-button
        v-if="isPhoto"
        slot="reference"
        type="primary"
        icon="el-icon-camera-solid"
        size="mini"
      ></el-button>
      <el-button v-else slot="reference" type="primary" round size="mini">
      </el-button>
    </el-popover>
  </div>
</template>

<script>
import {
  sendCameraText,
  sendRobotText,
  forceSignal,
} from "@/api/production/device";
export default {
  props: {
    left: {
      type: String,
      default: "0%",
    },
    top: {
      type: String,
      default: "0%",
    },
    bottom: {
      type: String,
      default: "0%",
    },
    right: {
      type: String,
      default: "0%",
    },
    isPhoto: {
      type: Boolean,
      default: true,
    },
    PostionNumber: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      textarea: "",
      visible: false,
    };
  },
  methods: {
    deleteValue() {
      this.textarea = "";
    },
    handlerConfirm() {
      let newTextArea = "";
      if (this.isPhoto) {
        newTextArea = this.PostionNumber + "," + this.textarea.replace("，", ",") + ",1,0";
        sendCameraText(newTextArea).then((res) => {
          if (res.code == 200) {
            this.$message({
              type: "success",
              message: res.msg,
            });
            this.handlerCloseShow();
          } else {
            this.$message.error(res.msg);
          }
        });
      } else {
        newTextArea = this.PostionNumber + "," + this.textarea;
         sendRobotText(value).then((res) => {
          if (res.code == 200) {
            this.$message({
              type: "success",
              message: res.msg,
            });
            this.handlerCloseShow();
          } else {
            this.$message.error(res.msg);
          }
        });
      }
    },
    handlerOpenShow() {
      this.visible = true;
      this.textarea = "";
    },
    handlerCloseShow() {
      this.visible = false;
      this.textarea = "";
    },
  },
};
</script>

<style  lang="less" scoped>
.client {
  position: absolute;
  width: 100px;
  height: 100px;
}
/deep/ .el-icon-camera-solid {
  font-size: 20px;
}
::v--deep .footer {
  width: 100%;
  display: flex;
  flex-wrap: wrap-reverse;
}
img {
  width: 25px;
  height: 25px;
}

.el-icon-close {
  float: right;
  margin-bottom: 5px;
  cursor: pointer;
}
.el-icon-close:hover {
  color: red;
}
</style>